<template>
    <div class="articles-add">
<el-dialog
  title="题目预览"
  :visible="dialogVisible"
  @close="show"
  width="70%"
  >
  <div>
    <el-row>
      <el-col :span="6">
        <span>【题型】:{{changeQues(rowData)}}</span>
      </el-col>
      <el-col :span="6">
        <span>【编号】:{{rowData.id}}</span>
      </el-col>
      <el-col :span="6">
        <span>【难度】:{{change(rowData)}}</span>
      </el-col>
      <el-col :span="6">
        <span>【标签】:{{rowData.tags}}</span>
      </el-col>
    </el-row>
    <el-row style="margin-top:30px">
      <el-col :span="6">
        <span>【学科】:{{rowData.subject}}</span>
      </el-col>
      <el-col :span="6">
        <span>【目录】:{{rowData.catalog}}</span>
      </el-col>
      <el-col :span="12">
        <span>【方向】:{{rowData.direction}}</span>
      </el-col>
    </el-row>
    <hr>
    <el-row>
      <el-col>【题干】: </el-col>
    </el-row>
    <el-row class="margin">
      <div v-html="rowData.question"></div>
    </el-row>

    <el-row style="margin:15px 0">
      单选题 选项:(以下选中的选项为正确答案)
    </el-row>
     <el-radio-group v-model="radio">
    <el-row class="margin">
      <el-radio :label="1">1</el-radio>
    </el-row>
    <el-row class="margin">
      <el-radio :label="2">10</el-radio>
    </el-row>
    <el-row class="margin">
      <el-radio :label="3">100</el-radio>
    </el-row>
    <el-row class="margin">
      <el-radio :label="4">1000</el-radio>
    </el-row>
    </el-radio-group>
    <hr>
    <el-row>
      <span>【参考答案】:</span>
      <el-button @click="showVideo" style="margin-left:10px" type="danger">视频答案预览</el-button>
    </el-row>
    <video width="400px" height="300px" controls="controls" :src="rowData.videoURL" v-if="flag" >
    </video>
    <hr>
    <el-row style="margin:20px 0">
      <span>【答案解析】:</span> <span v-html="rowData.answer"></span>
    </el-row>
    <hr>
    <el-row>
      <span style="margin-left:5px">题目备注: {{rowData.remarks}}</span>
    </el-row>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="show">关 闭</el-button>
  </span>
</el-dialog>

    </div>
</template>

<script>
import { difficulty, questionType } from '@/api/hmmm/constants.js'
export default {
  name: 'ArticlesPreview',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    rowData: {
      type: Object,
      required: true
    }
  },
  methods: {
    show () {
      this.flag = false
      this.$emit('update:dialogVisible', false)
    },
    // 视频显示
    showVideo () {
      this.flag = true
    },
    // 题型处理
    changeQues (val) {
      if (!val.questionType) return
      const res = this.questionType.find(item => item.value === +val.difficulty)
      console.log(res)
      return res.label
    },
    // 难度处理
    change (val) {
      if (!val.difficulty) return
      const res = this.difficulty.find(item => item.value === +val.difficulty)
      console.log(res)
      return res.label
    }

  },
  data () {
    return {
      radio: 1,
      flag: false,
      difficulty: difficulty, // 难度常量文件
      questionType: questionType // 题型常量文件
    }
  }
  // filters: {
  //   change: (val) => {
  //     return this.difficulty.find(item => item.value === val).lable
  //   }
  // }
}
</script>

<style scoped lang='scss'>
.title{
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
  h2 {
    padding: 0;
    margin: 0;
  }
  span{
    margin-left: 10px;
    margin-top: 10px;
  }
}
.content{
  background: #f5f5f5;
  padding: 10px;
}
</style>
